<template>
  <div>
    <el-row :gutter="20" class="mgb20">
      <el-col :span="12">
        <el-card>
          <div class="grid-content">
          <div class="grid-cont-center">
            <div class="grid-num">{{consumerCount}}</div>
            <div>用户总数</div>
          </div>
        </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div class="grid-content">
          <div class="grid-cont-center">
            <div class="grid-num">{{videoCount}}</div>
            <div>视频总数</div>
          </div>
        </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="mgb20 center">
      <el-col :span='12'>
        <h3 class="mgb20">用户性别比例</h3>
        <div style="background-color:white">
          <ve-pie :data="consumerSex" :theme="option"></ve-pie>
        </div>
      </el-col>
      <el-col :span='12'>
        <h3 class="mgb20">视频类型分布</h3>
        <div style="background-color:white">
          <ve-histogram :data="videoStyle"></ve-histogram>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {selectBySex,selectByStyle} from '../api/index'
export default {
  name:'Info',
  data(){
    return {
      consumerCount:0,  //用户总数
      videoCount:0,     //视频数量
      consumer:[],
      consumerSex:{   //按性别分类的用户数
        columns:['性别','总数'],
        rows:[
          {'性别':'女','总数':0},
          {'性别':'男','总数':0},
        ]
      },
      option:{
        color:['#ffc0cb','#87cefa'],   //男女饼状图颜色
      },
      videoStyle:{   //按歌单风格分类
        columns:['类型','总数'],
        rows:[
          {'类型':'动画','总数':0},
          {'类型':'音乐','总数':0},
          {'类型':'舞蹈','总数':0},
          {'类型':'知识','总数':0},
          {'类型':'生活','总数':0},
          {'类型':'时尚','总数':0},
          {'类型':'娱乐','总数':0},
          {'类型':'美食','总数':0},
          {'类型':'游戏','总数':0},
          {'类型':'番剧','总数':0},
          {'类型':'国创','总数':0},
          {'类型':'数码','总数':0},
          {'类型':'鬼畜','总数':0},
          {'类型':'资讯','总数':0},
          {'类型':'影视','总数':0},
          {'类型':'搞笑','总数':0},
          {'类型':'动物','总数':0},
          {'类型':'VLOG','总数':0},
          {'类型':'其他','总数':0},
        ]
      },
    }
  },
  mounted(){
    this.getInfo()
  },
  methods:{
    getInfo(){
      selectBySex().then(res =>{
        for(let item in res){
          if (res[item].itemName == 'boy') {
            this.consumerSex.rows[1]['总数'] = res[item].itemNum;
          }else if (res[item].itemName == 'girl') {
            this.consumerSex.rows[0]['总数'] = res[item].itemNum;
          }
          this.consumerCount += res[item].itemNum
        }
      })

      selectByStyle().then(res =>{
        for(let item in res){
          let index = res[item].itemName.slice(5,7)
          this.videoStyle.rows[index-1]['总数'] = res[item].itemNum
          this.videoCount += res[item].itemNum
        }
      })
    },
  }
}
</script>

<style scoped>
@import '../assets/css/info.css';
</style>